<link href="../addons/jy_weishop/resource/css/room.css?v=8" rel="stylesheet">
<style>
    html, body {
      position: relative;
      height: 100%;
	  overflow:hidden;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
.fe-floatright-bottom {
    min-height: 10px;
    position: fixed;
    bottom: 15px;
	right:15px;
    text-align: center;
    z-index: 1003;
}
.fe-floatright-bottom a{
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 100%;
    background: none;
	color:#fff;
	line-height:1.6rem;
	margin: 0 auto;
    margin-right: 0;
}
.fe-floatright-bottom a .icon{
	color:#fff;
	font-size:1.6rem;
	height:1.6rem;
	opacity:1;
}
.sw_progress {
    position: absolute;
    display: none;
    height: 3px;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: rgba(0,0,0,.2);
}
.sw_progress span {
    display: block;
    height: 100%;
    width: 0;
    background-color: #08A1EF;
    transition: width 800ms cubic-bezier(0.260,.860,.440,.985);
}
.avatar-follow{
	height: 50px;
    width: 50px;
    background: #fff;
    margin: auto;
    border-radius: 50px;
    border: 0 solid #fff;
}

.footer-msg{
	 position: fixed;
	 bottom:0;
}
.likepiaofu img{width: 0px;position: fixed; bottom: 100px; right: 15px;}
.followpiaofu img{width: 0px;position: fixed; bottom: 260px; right: 25px;}
.fui-icon-group .fui-icon-col {
    margin: 0;
}
.search-input input {border: 0px solid #b4b4b4;background:#f2f2f2;border-radius:1.2rem;padding:0.4rem 0.5rem;color:#333;}
.fui-header:after {border-bottom: 0px solid #D9D9D9;}
.fui-tag-red-o{margin:0.2rem;color: #fff;font-size:0.50rem;line-height:0.5rem;-webkit-border-radius: 0.4rem;border-radius: 0.4rem;font-style: normal;padding:0.2rem 0.5rem;border: 1px solid #fff;}
/*拆红包*/
.chaihb{
    text-align: center;
	position:fixed;
	z-index:4;
	left: 50%;
	top: 40px;
	margin-left: -125px;
}
.mengc{
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  overflow:auto;
}
.hongbao{
    background: #A5423A;
    width: 250px;
    height: 400px;	
	position: relative;	
    left: 0;
    top: 0;
	z-index:5;
    border-radius: 10px;
    margin: 0 auto;	
}
.topcontent{
    height: 280px;
    border: 1px solid #BD503A;
    background-color: #BD503A;
    border-radius: 10px 10px 50% 50% / 10px 10px 15% 15%;
    box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.2);
}
.avatar{
    position: relative;
}
.avatar span{
    position: absolute;
    top: 10px;
    right: 15px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);		
            transform: rotate(45deg);
    font-size: 2em;
    font-weight: bolder;
}
#close{
    color: rgba(0,0,0,0.5);
}
.avatar img{
    border: 1px solid #BD503A;
    border-radius: 50%;
    overflow: hidden;
    margin-top: 10%;
}
.topcontent h2{
    margin: 3px 0;
}
.text{
    color: #999;
}
.description{
    margin: 15px 0;
    font-size: 16px;
    font-weight: 600;
}
#chai{
    width: 100px;
    height: 100px;
    border: 1px solid #FFA73A;
    background-color: #FFA73A;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    display: inline-block;
    margin-top: -50px;
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
}
#chai span{
    margin-top: 35px;
    display: inline-block;
}
.rotate{
    -webkit-animation: anim .9s;
	-ms-animation: anim .9s  ;
            animation: anim .9s  ;
}
@-webkit-keyframes anim {
    from { -webkit-transform: rotateY(0deg); }
    to { -webkit-transform: rotateY(360deg); }
}
@-ms-keyframes anim {
    from { -ms-transform: rotateY(0deg); }
    to { -ms-transform: rotateY(360deg); }
}
@-o-keyframes anim {
    from { -o-transform: rotateY(0deg); }
    to { -o-transform: rotateY(360deg); }
}
@keyframes anim {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
/*红包页面*/
.money{
	width:90%;
	max-width:320px;
	height:300px;
	background:#fff;
	margin:0 auto;
	color:black;
	font-size:14px;
}
.money p{
	color:black;
	font-size:14px;
}
.moneytop{
	width:100%;
	height:120px;
	background:#da4d43;
	border-radius: 0 0 50% 50% / 0 0 45% 45%;
}
.moneyimg{
	width: 60px;
	height: 60px;
	margin: 0 auto;
	margin-top: -50px;
	border-radius: 50%;	
}
.moneyimg img{
	width:60px;
	height: 60px;	
    border-radius: 50%;
    overflow: hidden;	
}
.moneyfont{
	margin-top: 20px;
}
.moneynum p{
	font-size:28px;
}
.moneysize{
	color:red;
}
.moneybtn{
	position: relative;
	margin-top: 20px;
	border: 0;
	padding: 10px;
	border-radius: 5px;
	font-size: 18px;
	box-shadow: 3px 4px #fff;
	background: #fe4b44;
	color: #fff;
	animation: moneybtn 200ms infinite alternate;
	-webkit-animation: moneybtn 200ms infinite alternate;	
}
@keyframes moneybtn{
	0%{
		box-shadow: 3px 4px #fff;
		top: 0px;		
	}
	50%{
		box-shadow: 2px 2px #fff;
		top: 1px;
	}	
	100%{
		box-shadow: 1px 0px #fff;
		top: 2px;
	}	
}
@-webkit-keyframes moneybtn{
	0%{
		box-shadow: 3px 4px #fff;
		top: 0px;		
	}
	50%{
		box-shadow: 2px 2px #fff;
		top: 1px;
	}	
	100%{
		box-shadow: 1px 0px #fff;
		top: 2px;
	}	
}
.u-guidevideo {
	width:38px;
	height:38px;
	background-size:100%;
	position:absolute;
	left:50%;
	bottom:50%;
	margin-top:-19px;
	margin-left:-19px;
	display:block;
	z-index:9998
}
source{
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
}
.fe-floatico-bottom {
    min-height: 10px;
    width: 60px;
    position: fixed;
    margin: 5px;
    z-index: 1000;
}
.vjs-error-display {display:none;}
.vjs-poster {display:none;}
.vjs-control-bar {display:none;}
.vjs-text-track-settings {display:none;}
.vjs-loading-spinner {display:none;}
.vjs-hidden {display:none;}
.video-js .vjs-big-play-button {display:none;}
video {background:none}
    .hidden{
        display: none;
    }
    .wave {
        position: relative;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 110px;
        font-size: 40px;
    }

    .wave .circle {
        position: absolute;
        border-radius: 50%;
        opacity: 0;
    }

    /* 波纹效果 */
    .wave.ripple .circle {
        width: calc(100% - 6px); /* 减去边框的大小 */
        height: calc(100% - 6px); /* 减去边框的大小 */
        border: 3px solid #fff;
    }

    .wave.ripple .circle:first-child {
        animation: circle-opacity 2s infinite;
    }

    .wave.ripple .circle:nth-child(2) {
        animation: circle-opacity 2s infinite;
        animation-delay: .3s;
    }

    .wave.ripple .circle:nth-child(3) {
        animation: circle-opacity 2s infinite;
        animation-delay: .6s;
    }
    .wave.ripple.warning {
        color: #f1f1f1;
    }

    .wave.ripple.warning .circle {
        border-color: #f1f1f1;
    }
    .wave.solid .circle{
        width: 100%;
        height: 100%;
        background: #fff;
    }
    .wave.solid .circle:first-child {
        animation: circle-opacity 2s infinite;
    }
    .wave.solid.warning {
        color: #f1f1f1;
    }

    .wave.solid.warning .circle{
        background: #f1f1f1;
    }

    @keyframes circle-opacity{
        from {
            opacity: 1;
            transform: scale(0);
        }
        to {
            opacity: 0;
            transform: scale(1);
        }
    }
    .video-js.vjs-playing .vjs-tech {
        pointer-events: auto;
    }
.fee-tagup {background:linear-gradient(to right,rgba(238,2,253,1),rgba(129,2,138,1));color:#fff;width:auto;font-weight:400;font-size:0.55rem}
.fee-tag-nav {border-bottom-left-radius:1rem;border-top-left-radius:1rem;height:2rem;background:#01b169;color:#fff;width:100%;font-weight:400;font-size:0.55rem;margin:0.3rem 0;padding:0 0.2rem}
.fee-tagup-nav {border-bottom-right-radius:1rem;border-top-right-radius:1rem;height:2rem;background:#ff8f17;color:#fff;width:100%;font-weight:400;font-size:0.55rem;margin:0.3rem 0;padding:0 0.2rem}
.fee-tag-nav, .fee-tagup-nav, .fee-disabled-nav {
    line-height: 1.2rem;
}
.fui-navbar .nav-item {
    height: 2.45rem;
}
.fe-floatright-bottom a .icon.red{
    color: red;
}
.dot2{
	background: #fff;
    border-radius: 0.5rem;
    color: red;
    font-size: 0.6rem;
    height: 0.8rem;
    line-height: 0.8rem;
    margin-left: 0.1rem;
    min-width: 0.8rem;
    padding: 0 0.2rem;
    position: absolute;
    top: 0;
    left: 2.8rem;
    vertical-align: top;
    text-align: center;
    z-index: 11;
}
</style>
<header class="app-header">
	<div ng-if="pagedata.item.video" class="block-title">{{pagedata.item.title}}</div>
	<!-- 关注按钮 -->
	<!--弹目-->
	<div ng-if="pagedata.showtanmus && !pagedata.setting.no_tanmu" class="video-sms-pane {{pagedata.transition?'transition':''}}">
			<div class="video-sms-text">
				<image class="video-sms-logo" src="{{pagedata.tanmus[pagedata.nowmsgid].avatar}}"/>
				<span class="overflow-h"> 最新订单来自 {{pagedata.tanmus[pagedata.nowmsgid].nickname}}</span>
			</div>
	</div>
	<div id="goback" class="fe-floatback right" style="left: 4px;">
		<a href="javascript:void(0);" ng-click="access_json('/index/')">
		<i class="icon icon-back"></i>
		</a>
	</div>
	<div class="likepiaofu"></div>
	<div class="followpiaofu"></div>
	<!--<a href="javascript:void(0);" id="audio_btn" class="off video_exist rotate">
		<div id="yinfu"></div>
		<audio src="" autoplay="autoplay" loop="loop"></audio>
	</a>
	<div class="music-loading">
	</div>
	<div ng-if="pagedata.goods.title" href="javascript:" onclick="$('#showspec').modal();" class="left-living fui-list-group merchgroup" style="position: fixed;width:10rem;bottom:5.5rem;height:auto;padding:0.2rem">
            <div class="fui-list jump " style="padding:0.2rem">
                <a class="fui-list-media">
                    <img class="round" ng-src="{{tomedia(pagedata.goods.image) ||'../core/resource/images/nopic.jpg'}}">
                </a>
                <a class="fui-list-inner" style="color:#fff">
                    <div class="title" style="color:#fff">{{pagedata.goods.title}}</div>
                    <div class="price">￥<span class="red">{{pagedata.goods.price}}</span></div>
                </a>
                <a class="fui-remark jump">
                </a>
            </div>   
	</div>-->
	<div class="fe-floatright-bottom right" style="bottom:275px;right:8px">
		<div href="javascript:" ng-click="access_json('jy_videomerch/merchitem//id='+pagedata.merch.id)" class="avatar-follow c" style="background:#00c568;line-height:50px;">
			<img class="img-circle" ng-src="{{tomedia(pagedata.merch.logo) || '../addons/jy_videomerch/resource/images/dianpu.png'}}" style="width:1.5rem;height:1.5rem;" />
		</div>
	</div>
	<div class="fe-floatright-bottom right" style="bottom:200px">
		<a ng-click="pagedata.setshoucang();">
			<i ng-class="{'icon icon-xiai':1,'red':pagedata.islike==1}"></i>
		</a>
		<span style="font-size:0.6rem;color:#fff">{{pagedata.likes || 0}}</span>
	</div>
	<div class="fe-floatright-bottom right" style="bottom:140px">
		<a ng-click="pagedata.msgshow=1">
			<img class="img-circle" src="../addons/jy_videomerch/resource/images/msg.png" style="width:1.5rem;height:1.5rem;" />
		</a>
		<span style="font-size:0.6rem;color:#fff">{{pagedata.msgnum || 0}}</span>
	</div>
	<div class="fe-floatright-bottom right" style="bottom:80px">
		<a onclick="$('#showsharecover').modal();">
			<img class="img-circle" src="../addons/jy_videomerch/resource/images/fx.png" style="width:1.5rem;height:1.5rem;" />
		</a>
		<span style="font-size:0.6rem;color:#fff">{{pagedata.fxtimes || 0}}</span>
	</div>
	<div class="fui-navbar" style="background:#fff;height:auto;padding:0.3rem">
		<a class="nav-item external" href="javascript:" ng-click="access_json('jy_videomerch/merchitem//id='+pagedata.merch.id)">
			<div class="fui-cellone" style="padding:0">
			<div class="fui-cell-label" style="width:auto;margin-right:0.3rem">
			<div class="avatar-follow c" style="background:#00c568;line-height:50px;">
				<img class="img-circle" ng-src="{{tomedia(pagedata.merch.logo) || '../addons/jy_videomerch/resource/images/dianpu.png'}}" style="width:1.5rem;height:1.5rem;" />
			</div>
			</div>
			<div class="fui-cell-text l">
				<div style="font-size:0.75rem">{{pagedata.merch.merchname || '商家名称'}}</div>
				<div style="font-size:0.6rem"><i class="icon icon-phone" style="font-size:0.6rem"></i>商家电话</div>	
			</div>
			</div>
		</a>
		<a class="nav-item" href="javascript:" onclick="$('#showsharecover').modal();">
			<div class="fee-tag-nav" style="line-height: 2rem;">
				<span style="width:100%">￥ <span style="font-size:0.8rem">{{pagedata.totalprice||'0.00'}}</span></span>
			</div>
		</a>
		<a class="nav-item" href="javascript:" ng-click="pagedata.msggoods=true" target="_blank">
			<div class="fee-tagup-nav" style="line-height: 2rem;font-size:0.7rem">
				<div ng-if="pagedata.cartnum>0" class="dot2" style="display: block; top:0.5rem">{{pagedata.cartnum}}</div>
				<i class="icon icon-cart11" style="font-size:1.3rem"></i>
			</div>
		</a>
    </div>
</header>
<div id="followbar" class="modal fade" tabindex="-1" style="display:none;">
		<div class="modal-dialog" style="width:60%;left:20%">
			<div class="modal-content">
				<div class="wap-qrcode-container">
					<p class="example1">{{pagedata.pluginset.title || '欢迎浏览'}}</p>
						<div class="wap-qrcode-image">
							<img ng-src="{{tomedia(pagedata.pluginset.ewm) || '../core/resource/images/nopic.jpg'}}"/>
						</div>
					<p class="example1">长按二维码关注</p>
				</div>
			</div>
		</div>
</div>

<div class="fui-page">
<div class="swiper-container fullscreen">
	<div id="my-videoblock" class="swiper-wrapper block-video">	
		<video preload="auto" poster="{{tomedia(pagedata.item.image)}}" id="player" playsinline webkit-playsinline x5-video-player-type="h5-page" style="margin: auto;" autoplay="autoplay" class="video-js" width="100%" height="100%">
                <source ng-src="{{tomedia(pagedata.item.video)}}"  type="video/mp4">
        </video>
	</div>
	<div id="control" class="prompt">
		<div class="live-tips loading">
                <div class="inner">
                    <div class="text">加载视频中</div>
                    <div class="date"></div>
                </div>
         </div>
		<div id="pauseBtn" class="live-tips play btn-play" style="margin-top:-6.6rem">
                <div class="inner" style="background:none;width: 100px;">
					<div class="wave solid warning">
						<div class="circle"></div>
						<div class="content">
							 <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5228" width="32" height="32"><path d="M732.502883 465.602819c-107.883492-82.3454-215.772403-164.681769-323.652282-247.014525-38.414608-29.327534-93.780555-1.929039-93.780555 46.396277v494.029051c0 48.325316 55.365948 75.725617 93.780555 46.398084 107.87988-82.332757 215.76879-164.669126 323.652282-247.014525 30.61356-23.357989 30.61356-69.436372 0-92.794362z" fill="#ffffff" p-id="5229"></path></svg>
						</div>
					</div>
                </div>
        </div>
	 </div>
</div>
</div>
<div ng-include="sys_html('common/_pingjias')"></div>
<div ng-include="sys_html('common/_goods')"></div>
<!--分享弹层-->
<div id="showsharecover" class="modal fade" tabindex="-1" style="z-index:99999;display:none;">
<div class="modal-dialog" style="width:100%;left:0;top:0">
	<div id="cover">
		<div class='fui-mask-m visible'></div>
		<div class='arrow'></div>
		<div class='content'>请点击右上角<br/>通过【发送给朋友】<br/>邀请好友点赞哦！</div>
	</div>
</div>
</div>
<script src="../addons/jy_weishop/resource/js/live.js"></script>
<script>
//概率计算
scope.pagedata.random=function(rate){
	var rate = parseInt(rate);
	var n = Math.random() * 100;
	if(n <= rate){
		return true
	}else{
		return false
	}
}
//收藏
scope.pagedata.setshoucang=function(){
	scope.post_json('/index/shoucang/',{'pid':scope.pagedata.item.id},function(res){
			if(scope.pagedata.islike==1){
				scope.pagedata.islike=0
				scope.pagedata.likes--
			}else{
				scope.pagedata.islike=1
				scope.pagedata.likes++
			}
			scope.$evalAsync();
			//scope.message(res)
	});
}
//获取关注
scope.pagedata.setfollow=function(){
	var params={
		op:'like',
		callback:function(res){
			scope.message(res)
			var time = 0
			for(var i = 0;i<88;i++){
				setTimeout('followpiaofu()',time);
				if(i<10){
					time += 100
				}else if(i>=10 && i<20){
					time += 200
				}else if(i>=20 && i<30){
					time += 300
				}else if(i>=30 && i<40){
					time += 400
				}else if(i>=40 && i<50){
					time += 500
				}else if(i>=50 && i<60){
					time += 600
				}else if(i>=60 && i<70){
					time += 700
				}else if(i>=70 && i<80){
					time += 800
				}else{
					time += 900
				}
			}
		}
	};
	scope.post_json(params);
}
//获取留言
scope.tool.get_list('/item/getmsg/pid='+scope.pagedata.item.id,true);
scope.pagedata.scroll_bottom=function(){
	scope.tool.get_list('/item/getmsg/pid='+scope.pagedata.item.id);
}
scope.pagedata.getmsg=function(){
	var params={
		data:{},
		op:'getmsg',
		callback:function(res){
			scope.$evalAsync();
		}
	};
	scope.post_json(params);
}
//提交留言
scope.pagedata.setmsg=function(msg,id){
	if(!msg){
		scope.message('发布失败，没有内容！','error');
	}
	var params={
		data:{'msg':msg,'id':id},
		op:'setmsg',
		callback:function(res){
			scope.tool.get_list('/item/getmsg/pid='+scope.pagedata.item.id,true);
			scope.message(res)
		}
	};
	scope.post_json(params);
}
function likepiaofu() {
		var x = 100;       
		var y = 330;
		var num = Math.floor(Math.random() * 6 + 1);
		var index=$('.likepiaofu').children('img').length;
		var rand = parseInt(Math.random() * (x - y + 1) + y); 
		$(".likepiaofu").append("<img src=''>");
		$(".likepiaofu").find('img:eq(' + index + ')').attr('src','../addons/jy_weishop/resource/img/like_icon_'+num+'.png')
		$(".likepiaofu").find("img").animate({
			bottom:"500px",
			opacity:"0",
			right: rand,
			width:"32px"
		},3000)
}
function followpiaofu() {
		var x = 100;       
		var y = 330;
		var num = Math.floor(Math.random() * 6 + 1);
		var index=$('.followpiaofu').children('img').length;
		var rand = parseInt(Math.random() * (x - y + 1) + y); 
		$(".followpiaofu").append("<img src=''>");
		$(".followpiaofu").find('img:eq(' + index + ')').attr('src','../addons/jy_weishop/resource/img/follow_icon_'+num+'.png')
		$(".followpiaofu").find("img").animate({
			bottom:"500px",
			opacity:"0",
			right: rand,
			width:"32px"
		},3000)
}
function reset_body(){
	document.body.scrollTop = document.body.scrollTop;
}
</script>
<script>
scope.pagedata.check_buy=function(){
	scope.post_json('/item/check_buy/',scope.pagedata.item);
}
//刷新总数和总价
scope.pagedata.refresh=function(){
	var goods = scope.pagedata.item.goods;
	var totalprice=0;
	var cartnum=0;
	for(var i=0;i<goods.length;i++){
		if(goods[i].cartnum>0){
			totalprice +=goods[i].price*goods[i].cartnum;
			cartnum +=goods[i].cartnum;
		}
	}
	scope.pagedata.totalprice=totalprice;
	scope.pagedata.cartnum=cartnum;
	scope.pagedata.showprice=scope.price(scope.pagedata.totalprice);
	scope.$evalAsync();
}
//减少
scope.pagedata.minus=function(index){
	var g = scope.pagedata.item.goods[index]
	if(g.cartnum<=0){
		return false;
	}
	g.cartnum--;
	scope.pagedata.item.goods[index]=g;
	scope.pagedata.refresh();
}
//增加
scope.pagedata.plus=function(index){
	var g = scope.pagedata.item.goods[index]
	//console.log(g);
	if(g.cartnum>=g.canbuynum && g.canbuynum){
		scope.message('不能再添加了，每人最多购买'+g.canbuynum+'件！','error');
		return false;
	}
	if(g.cartnum>=g.buynum || (g.buynum>=g.isbuynum && g.isbuynum>0)){
		scope.message('不能再添加了，已超过库存！','error');
		return false;
	}
	g.cartnum++;
	scope.pagedata.item.goods[index]=g;
	scope.pagedata.refresh();
}
</script>
<script>
scope.pagedata.getitem=function(type){
	if(type==1){
		var goodsid=scope.pagedata.onid
	}else{
		var goodsid=scope.pagedata.nextid
	}
	scope.page_loading();
	scope.get('jy_videomerch/item//id='+goodsid,function(res){
		scope.pagedata=$.extend(scope.pagedata,res)
		scope.page_loading('hide');
		if(scope.pagedata.item.video){
			live(1);
		}
		scope.$evalAsync();
	});
}
</script>